<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
	</head>
	<body>

		<style>
			body{
				margin: 0px;
				padding: 0px;
			}

			.form-outer{
				background: lightgrey;
				width: 100%;
				height: 100vh;
			}

			#conversational-form{
				width: 50vw;
				left: auto;
				right: 0px;
			}
		</style>

		<div id="context" class="form-outer" cf-context>

			<form id="form">
				<input
					id="123"
					name="123"
					type="text"
					cf-questions="Hello, please tell me your name?"
				/>

				<fieldset cf-questions="Choose your favourite color, <span style='background: blue;'>blue</span>, <span style='background: red;'>red</span> or <span style='background: yellow;'>yellow</span>">
					<input type="radio" cf-label="blue" value="blue" id="1" />
					<input type="radio" cf-label="red" value="red" id="2" />
					<input type="radio" cf-label="yellow" value="yellow" id="3" />
				</fieldset>
			</form>
		</div>






		<!-- <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script> -->

























		<script
			type="text/javascript"
			src="../build/bower_components/promise-polyfill/promise.js"
		></script>

		<script
			type="text/javascript"
			src="../build/bower_components/custom-event-polyfill/custom-event-polyfill.js"
		></script>

		<script
			id="conversational-form-development" 
			type="text/javascript"
			src="../build/cf/ConversationalForm.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/parsing/TagsParser.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ConversationalForm.plugin.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/Helpers.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/EventDispatcher.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInterfaceOptions.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/BasicElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/ControlElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/ControlElements.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/ScrollController.js"
		></script>

		<script 
			type="text/javascript"
			src="../build/cf/data/Dictionary.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/Tag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/TagGroup.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/InputTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/SelectTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/ButtonTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/OptionTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/Button.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/RadioButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/CheckboxButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/OptionButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/OptionsList.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/UploadFileUI.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInput.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInputElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserInputElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserTextInput.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/MicrophoneBridge.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserInputSubmitButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/chat/ChatResponse.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/chat/ChatList.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/FlowManager.js"
		></script>

		<link type="text/css" rel="stylesheet" href="../build/conversational-form.css"/>

		<!-- OR -->
		<!--<script type="text/javascript" id="conversational-form-development" src="../dist/conversational-form.min.js" crossorigin></script>-->

		
		<style>
			.custom-template{
				font-size:12px;
				color:red;
			}
		</style>
		<script>

			(function(){
				var dispatcher = new cf.EventDispatcher(),
					synth = null,
					recognition = null,
					msg = null,
					SpeechRecognition = null;
				
				try{
					SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
				}catch(e){
					console.log("Example support range: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility");
				}

				// here we use https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
				// you can use what ever API you want, ex.: Google Cloud Speech API -> https://cloud.google.com/speech/

				if(SpeechRecognition){
					// here we create our input
					var microphoneInput = {
						// behaviors needs to follow the cf.IUserInput interface, they will be checked
						init: () => {
							console.log("voice: init method called from mic integration");
						},
						// set awaiting callback to false, as we will NOT await the speak in this example
						awaitingCallback: false,
						cancelInput: function() {
							console.log("voice: CANCEL")
							finalTranscript = null;
							if(recognition){
								recognition.onend = null;
								recognition.onerror = null;
								recognition.stop();
							}
						},
						input: (resolve, reject, mediaStream) => {
							console.log("voice: INPUT")
							// input is called when user is interacting with the CF input button (UserVoiceInput)

							// connect to Speech API (ex. Google Cloud Speech), Watson (https://github.com/watson-developer-cloud/speech-javascript-sdk) or use Web Speech API (like below), resolve with the text returned..
							// using Promise pattern -> https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
								// if API fails use reject(result.toString())
								// if API succedes use resolve(result.toString())
							
							if(recognition)
								recognition.stop();

							recognition = new SpeechRecognition(),
								finalTranscript = '';

							recognition.continuous = false; // react only on single input
							recognition.interimResults = false; // we don't care about interim, only final.
							
							// recognition.onstart = function() {}
							recognition.onresult = function(event) {
								// var interimTranscript = "";
								for (var i = event.resultIndex; i < event.results.length; ++i) {
									if (event.results[i].isFinal) {
										finalTranscript += event.results[i][0].transcript;
									}
								}
							}

							recognition.onerror = function(event) {
								reject(event.error);
							}

							recognition.onend = function(event) {
								if(finalTranscript && finalTranscript !== ""){
									resolve(finalTranscript);
								}
							}

							recognition.start();
						}
					}
				}

				var conversationalForm = window.cf.ConversationalForm.startTheConversation({
					formEl: document.getElementById("form"),
					context: document.getElementById("context"),
					eventDispatcher: dispatcher,

					// add the custom input (microphone)
					microphoneInput: microphoneInput,

					flowStepCallback: function(dto, success, error){
						success();
					},
					submitCallback: function(){
						// remove Conversational Form
						console.log("voice: Form submitted...", conversationalForm.getFormData(true));
						alert("You made it! Check console for data")
					}
				});

				if(!SpeechRecognition){
					conversationalForm.addRobotChatResponse("SpeechRecognition (and getUserMedia) not supported, so <strong>no</strong> Microphone here.");
				}
			})();
		</script>
	</body>
</html>
